<template>
    <div class="xuanXiang">
        <div class="text">
            请设置人数:
        </div>
        <div>
            <button @click="selectNum(num+1)" v-for="num in 5" :key="num" :class="{'button':slectedButton==num+1}">{{num+1}}人</button>
        </div>
       <div class="startGameButton">
           <button class="startGame" @click="clickStartGame">{{startGameMsg}}</button>
       </div>
    </div>
</template>

<script>
    import eventVue from "@/components/utils/event-vue";
    export default {
        name: "Controller",
        data(){
            return{
                playerResults:[],
                playerNum:0,
                msg:'',
                resultMap:new Map(),
                slectedButton:0,
                isShow:false,
                startGameMsg:'开始游戏',
            }
        },
        props:{

        },
        methods:{
            clickStartGame(){
                if (this.startGameMsg === '重新开始'){
                    this.isShow = false
                    this.startGameMsg = '开始游戏'
                    window.location.reload();
                }else if ( this.startGameMsg === '开始游戏'){
                    this.isShow = true
                    this.startGameMsg = '重新开始'
                }
                this.$emit('startGame',this.isShow);
            },
            selectNum(playerNum){
                this.slectedButton = playerNum
                this.isShow = false
                this.$emit('func',playerNum);
                this.playerNum=playerNum
                this.playerResults=[]
                this.msg = ''
                this.resultMap=new Map()
                eventVue.$emit("show", false)
                this.$emit('display', this.msg , this.isShow)
            },
            endGame() {
                var arr = this.playerResults
                arr.sort(this.compare)
                console.log("这是得分排序："+arr)
                eventVue.$emit("show", true,arr[0])
                this.msg = this.resultMap.get(arr[0])+"获胜！！"
                if (arr[0] == arr[1]) {
                    this.msg = "平局"
                }
                this.$emit('display', this.msg)
                console.log(this.msg + "这是最高分")
            },
            compare(x, y) {//比较函数
                if (x > y) {
                    return -1;
                } else if (x < y) {
                    return 1;
                } else {
                    return 0;
                }
            },
            getPoint(){
                eventVue.$on("points",(points)=>{
                    this.resultMap.set(points[1],"玩家"+points[0])
                    this.playerResults.push(points[1])
                    console.log("最终结果集："+this.playerResults+"||playerNum的值"+this.playerNum)
                    if (this.playerResults.length==this.playerNum){
                        console.log("触发结束游戏按钮")
                        this.endGame()
                    }
                })
            }
        },
        created(){
            this.getPoint()
        },
        mounted(){

        }
    }
</script>

<style scoped>
    .startGameButton{
        align-self: center;
    }
    .startGame{
        width: 300px;
        height: 100px;
        border-radius: 10px;
        border-width: 5px;
        border-color: lightslategray;
        margin-top: 70px;
        background-color: #444444;
        font-size: 40px;
        color: goldenrod;
    }
    .xuanXiang {
        display: flex;
        flex-direction: column;
        align-self: center;
        justify-content: center;
    }
    .text{
        font-size: 20px;
        align-self: center;
        text-align:center;
        font-family: 新宋体;
        font-weight: bolder;
        color: goldenrod;
    }
    button{
        font-size: 40px;
        color: goldenrod;
        background-color: #444444;
        border-width: 3px;
        border-style: solid;
        border-radius: 5px;
        margin: 10px;
        width: 150px;
    }
    .button{
        font-size: 40px;
        border-color: #444444;
        border-style: solid;
        border-radius: 5px;
        margin: 10px;
        color: #4b4b4b;
        background: goldenrod;
    }
</style>